<template>
  <el-form :model="modelValue" label-width="120px" :rules="rules" ref="formRef">
    <el-form-item label="主机名称" prop="name" required>
      <el-input v-model="modelValue.name" placeholder="请输入主机名称" />
    </el-form-item>
    <el-form-item label="主机编码" prop="code" required>
      <el-input v-model="modelValue.code" placeholder="请输入主机编码" />
    </el-form-item>
    <el-form-item label="主机地址" prop="address" required>
      <el-input v-model="modelValue.address" placeholder="请输入主机地址" />
    </el-form-item>
    <el-form-item label="系统类型" prop="osType" required>
      <el-select v-model="modelValue.osType" placeholder="请选择系统类型" clearable>
        <el-option
          v-for="item in os_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="主机类型" prop="types" required>
      <el-select v-model="modelValue.types" placeholder="请选择主机类型" clearable>
        <el-option
          v-for="item in host_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="主机架构" prop="archType" required>
      <el-select v-model="modelValue.archType" placeholder="请选择主机架构" clearable>
        <el-option
          v-for="item in arch_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="主机备注" prop="remark">
      <el-input v-model="modelValue.remark" type="textarea" placeholder="请输入主机备注" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';

const { proxy } = getCurrentInstance()
const { os_type, arch_type, host_type } = proxy.useDict("os_type", "arch_type", "host_type")
const formRef = ref()

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({})
  },
  isEdit: Boolean
});

const emit = defineEmits(['update:modelValue']);

// 表单验证规则
const rules = computed(() => {
  if (props.isEdit) {
    return {
      name: [{ required: true, message: '主机名称不能为空', trigger: 'blur' }],
      code: [{ required: true, message: '主机编码不能为空', trigger: 'blur' }],
      address: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
      osType: [{ required: true, message: '系统类型不能为空', trigger: 'change' }],
      types: [{ required: true, message: '主机类型不能为空', trigger: 'change' }],
      archType: [{ required: true, message: '主机架构不能为空', trigger: 'change' }],
    }
  } else {
    // 新增模式下不设置验证规则，避免打开时就显示验证错误
    return {}
  }
})


// 设置默认值（新增时）
const setDefaultValues = () => {
  if (!props.isEdit) {
    // 设置下拉框默认选中第一个选项
    const newValue = { ...props.modelValue };
    
    if (os_type.value && os_type.value.length > 0) {
      newValue.osType = os_type.value[0].value;
    }
    if (host_type.value && host_type.value.length > 0) {
      newValue.types = host_type.value[0].value;
    }
    if (arch_type.value && arch_type.value.length > 0) {
      newValue.archType = arch_type.value[0].value;
    }
    
    emit('update:modelValue', newValue);
  }
}

// 监听字典数据变化
watch([os_type, host_type, arch_type], () => {
  setDefaultValues()
})

onMounted(() => {
  setDefaultValues()
})

// 暴露验证方法
defineExpose({
  validate: () => formRef.value?.validate()
})
</script>